<template>
    <div class="by-skeleton" :class="skeletonClass">
        <template v-if="loading">
            <div class="by-skeleton-header" v-if="avatar">
                <span class="by-skeleton-avatar" :style="avatarClaSty.style" :class="avatarClaSty.aClass"></span>
            </div>
            <div class="by-skeleton-content">
                <h3 class="by-skeleton-title" :style="titleStyle" v-if="title"></h3>
                <ul class="by-skeleton-paragraph" v-if="paragraph">
                    <li v-for="(item,index) of parahList" :key="'paragraph'+index" :style="{width:item?`${item}%`:false}"></li>
                </ul>
            </div>
        </template>
        <slot v-else></slot>

        
    </div>
</template>
<script>
import { computed } from 'vue'
export default {
    name:'Skeleton',
    props:{
        active:{
            type:Boolean,
            default:false
        },
        avatar:{
            type:[Boolean,Object],
            default:false
        },
        loading:{
            type:Boolean,
            default:true
        },
        paragraph:{
            type:[Boolean,Object],
            default:true
        },
        title:{
            type:[Boolean,Object],
            default:true
        }
    },
    setup(props){
        const skeletonClass=computed(()=>{
            const sClass={}
            if(props.avatar){
                sClass['by-skeleton-with-avatar']=true
            }
            if(props.active){
                sClass['by-skeleton-active']=true
            }
            return sClass
        })
        const avatarClaSty=computed(()=>{
            const aClass={}
            let style
            aClass['by-skeleton-avatar-large']=true
            aClass['by-skeleton-avatar-circle']=true
            if(typeof props.avatar=='object'){
                if(typeof props.avatar.size=='number'){
                    aClass['by-skeleton-avatar-large']=false
                    style={
                        width: `${props.avatar.size}px`,
                        height: `${props.avatar.size}px`,
                        lineHeight: `${props.avatar.size}px`,
                        fontSize: `${props.avatar.size/2}px`,
                    }
                }else{
                    aClass['by-skeleton-avatar-large']=false
                    aClass['by-skeleton-avatar-'+props.avatar.size]=true
                }
                if(props.avatar.shape){
                    aClass['by-skeleton-avatar-circle']=false
                    aClass['by-skeleton-avatar-'+props.avatar.shape]=true
                }
            }
            return {
                aClass,
                style
            }
        })
        const titleStyle=computed(()=>{
            const style={
                width:38
            }
            if(typeof props.title=='object'){
                style.width=props.title.width
            }
            style.width=style.width+'%'
            return style
        })
        const parahList=computed(()=>{
            let list=new Array(3).fill(false)
            if(typeof props.paragraph=='object'){
                console.log('object')
                if(props.paragraph.rows){
                    list=new Array(props.paragraph.rows).fill(false)
                }
                if(props.paragraph.width instanceof Array){
                    list=props.paragraph.width 
                }else if(props.paragraph.width){
                    list[list.length-1]=props.paragraph.width 
                }
            }
            console.log(list)
            return list
        })
        return {
            skeletonClass,
            avatarClaSty,
            titleStyle,
            parahList
        }
    }
    
}
</script>
<style lang="stylus" scoped>
.by-skeleton{
    display: table;
    width: 100%;
    .by-skeleton-header{
        display: table-cell;
        padding-right: 16px;
        vertical-align: top;
        .by-skeleton-avatar{    
                display: inline-block;
                vertical-align: top;
                background: #f2f2f2;
                width: 32px;
                height: 32px;
                line-height: 32px;
        }
        .by-skeleton-avatar-circle{
            border-radius: 50%;
        }
        .by-skeleton-avatar-square{
            border-radius:2px
        }
        .by-skeleton-avatar-large{
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
        .by-skeleton-avatar-samll{
            width: 24px;
            height: 24px;
            line-height: 24px;
        }
    }
    .by-skeleton-content{
        display: table-cell;
        width: 100%;
        vertical-align: top;
        .by-skeleton-title{
            width: 100%;
            height: 16px;
            margin 0
            margin-top: 16px;
            background: #f2f2f2;
        }
        .by-skeleton-paragraph{
            margin:0
            margin-top: 24px;
            padding: 0;
            list-style: none;
            li {
                width: 100%;
                height: 16px;
                list-style: none;
                background: #f2f2f2;
            }
            li+li{
                margin-top 16px
            }
            li:last-child:not(:first-child):not(:nth-child(2)) {
                width: 61%;
            }
        }
    }
}
.by-skeleton-with-avatar{
    .by-skeleton-content {
        .by-skeleton-title {
            margin-top: 12px;
        }
        .by-skeleton-paragraph {
            margin-top: 28px;
        }
    }
}
.by-skeleton-active{
    .by-skeleton-header .by-skeleton-avatar,.by-skeleton-content  .by-skeleton-title,.by-skeleton-content .by-skeleton-paragraph>li{
            background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
            background-size: 400% 100%;
            animation: by-skeleton-loading 1.4s ease infinite;
    }
}

@keyframes by-skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
</style>